<template>
  <div>
    <BaseTitle back title="搜索" @goBack='goBack'/>
    <van-search
      v-model="keyword"
      show-action
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div>
          <GoodsList :list='getSearchGoods' @datails='datails'/>
      </div>
      <div v-if="!goodsList.length && keyword" class="null">
          暂无数据~
      </div>
  </div>
</template>

<script>
  import BaseTitle from "components/BaseTitle";
  import Back from 'components/Back';
  import GoodsList from 'components/GoodsList';
  import { Toast } from 'vant';
  import { mapMutations, mapGetters, mapActions } from 'vuex';
  export default {
      data() {
          return {
            goodsList: [],
            keyword: ''
          }
      },
      components: {
          Back,
          BaseTitle,
          GoodsList,
      },
      computed: {
        ...mapGetters(['getSearchGoods'])
      },
      methods: {
        goBack() {
            this.$router.go(-1)
        },
        onSearch() {
          if (this.keyword) {
            this.handleSearchGoods(this.keyword);
          }
        },
        handleSearchGoods(keyword) {
          this.$http.get(`/api/goods/search?keyword=${keyword}`).then(res => {
            this.setSearchGoods(res.data.goods);
            if (res.data.code !== 200) {
              Toast({
                duration: 1000,
                message: '抱歉，没有数据',
                type: 'fail'
              });
            }
          });
        },
        datails(item) {
            this.setGoodDetails(item)
            this.$router.push({path:`/home/${item.id}`})
            setTimeout(() => {
                this.setBrowse(item)     // 加入最近浏览
            }, 300);
        },
        ...mapMutations({
            setGoodDetails: 'goodsDetail'
        }),
        ...mapActions(['setSearchGoods', 'setSearchValue', 'setBrowse'])
      },
  }
</script>

<style lang="less" scoped>
</style>

